<template>
  <div class="test-container">
    <h1>TopNavBar 测试页面</h1>

    <div class="test-section">
      <h2>当前状态</h2>
      <div class="status-info">
        <p><strong>Token:</strong> {{ currentToken || "未登录" }}</p>
        <p>
          <strong>用户信息:</strong>
          {{ JSON.stringify(currentUserInfo, null, 2) }}
        </p>
      </div>
    </div>

    <div class="test-section">
      <h2>测试操作</h2>
      <div class="btn-group">
        <button @click="mockLogin">模拟登录</button>
        <button @click="mockLogout">模拟登出</button>
        <button @click="updateUserInfo">更新用户信息</button>
        <button @click="updateToRealUser">设置真实用户</button>
        <button @click="updateAvatar">更新头像</button>
      </div>
    </div>

    <div class="test-section">
      <h2>SessionStorage 内容</h2>
      <div class="storage-content">
        <div>
          <strong>token:</strong> {{ sessionStorage.getItem("token") || "空" }}
        </div>
        <div>
          <strong>userInfo:</strong>
          {{ sessionStorage.getItem("userInfo") || "空" }}
        </div>
      </div>
    </div>

    <!-- 这里会显示TopNavBar -->
    <div class="test-section">
      <h2>TopNavBar 组件</h2>
      <TopNavBar />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import TopNavBar from "@/components/TopNavBar.vue";

const currentToken = ref("");
const currentUserInfo = ref({});

// 监听sessionStorage变化
function updateLocalState() {
  currentToken.value = sessionStorage.getItem("token") || "";
  const userInfoStr = sessionStorage.getItem("userInfo") || "{}";
  currentUserInfo.value = JSON.parse(userInfoStr);
}

// 模拟登录
function mockLogin() {
  const mockToken = "mock-token-" + Date.now();
  const mockUserInfo = {
    id: 1,
    username: "测试用户",
    name: "测试用户",
    email: "test@example.com",
    avatar: "/src/assets/character.png",
  };

  sessionStorage.setItem("token", mockToken);
  sessionStorage.setItem("userInfo", JSON.stringify(mockUserInfo));

  updateLocalState();
  console.log("模拟登录成功");
}

// 模拟登出
function mockLogout() {
  sessionStorage.removeItem("token");
  sessionStorage.removeItem("userInfo");
  sessionStorage.removeItem("menuList");

  updateLocalState();
  console.log("模拟登出成功");
}

// 更新用户信息
function updateUserInfo() {
  const updatedUserInfo = {
    ...currentUserInfo.value,
    username: "更新后的用户名",
    email: "updated@example.com",
  };

  sessionStorage.setItem("userInfo", JSON.stringify(updatedUserInfo));
  updateLocalState();
  console.log("用户信息更新成功");
}

// 更新用户信息为真实用户（测试API调用）
function updateToRealUser() {
  const realUserInfo = {
    ...currentUserInfo.value,
    username: "真实用户名",
    name: "真实用户名",
    email: "real@example.com",
  };

  sessionStorage.setItem("userInfo", JSON.stringify(realUserInfo));
  updateLocalState();
  console.log("设置为真实用户，可以测试API调用");
}

// 更新头像
function updateAvatar() {
  const updatedUserInfo = {
    ...currentUserInfo.value,
    avatar: "/src/assets/ai-companion.png",
  };

  sessionStorage.setItem("userInfo", JSON.stringify(updatedUserInfo));
  updateLocalState();
  console.log("头像更新成功");
}

// 初始化
onMounted(() => {
  updateLocalState();

  // 监听sessionStorage变化
  window.addEventListener("storage", updateLocalState);

  // 监听自定义事件
  window.addEventListener("sessionStorageChange", updateLocalState);
});
</script>

<style scoped>
.test-container {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.status-info {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  white-space: pre-wrap;
  font-family: monospace;
}

.btn-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-group button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.btn-group button:hover {
  background: #f0f0f0;
}

.storage-content {
  background: #f9f9f9;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
}

.storage-content div {
  margin-bottom: 10px;
  word-break: break-all;
}
</style>
